<template lang="pug">
div(style="padding-bottom: 5rem")
  app-header(fixed,back,title="活动详细",v-if="!$helper.isWechat")
  .main-wrapper(ref="mainWrapper",:style="{top: $helper.isWechat ? '0' : '0.84rem'}")
    div.wrapper-content
      img(:src="info.picture")
      app-product(v-for="(item,index) in lists",:key="index",:model="item",@plus="buyProductHandler")
      div.cover(v-show="scrolling")
  .cart-bar
    span 购物车(0)
    span 总价: ￥0
  app-buy-option(:model="currentProduct",@close="buyOptionCloseHandler")
</template>

<script>
import BScroll from 'better-scroll'
import Product from '../../components/Product'
import { Toast, Button } from 'mint-ui'
import Header from 'components/Header'
import BuyOption from 'components/BuyOption'
export default {
  components: {
    'mt-button': Button,
    'app-header': Header,
    'app-product': Product,
    'app-buy-option': BuyOption
  },
  data () {
    return {
      mainScroll: null,
      scrolling: false,
      info: {},
      lists: [],
      currentProduct: null
    }
  },
  async created () {
    await this.loadData()
    this._initScroll()
  },
  methods: {
    async loadData () {
      let toast = Toast('正在加载..')
      let result = await this.$rpc.invoke('activity_detail', [this.$route.params['id']]).complete()
      this.lists = result.data.lists
      this.info = result.data.info
      toast.close()
    },
    buyProductHandler (model) {
      this.currentProduct = model
    },
    buyOptionCloseHandler () {
      this.currentProduct = null
    },
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
          this.mainScroll.on('scrollStart', () => {
            this.scrolling = true
          })
          this.mainScroll.on('scrollEnd', () => {
            this.scrolling = false
          })
        })
      } else {
        this.mainScroll.refresh()
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.main-wrapper
  position: absolute
  bottom: 1.1rem
  left: 0
  right: 0
  overflow: hidden
.wrapper-content
  img
    max-width: 100%
.cart-bar
  width: 100%
  background: #981200
  height: 1.1rem
  line-height: 1.1rem
  text-indent: .2rem
  color: #fff
  position: absolute
  bottom: 0
  span
    padding: 0 .4rem
    display: inline-block
    border-right: 1px solid #7c1609
</style>
